<template>
  <div class="applet-blendent-container">
    <el-form :model="colorData" label-width="100px" size="small">
      <div class="applet-blendent-header">顶部导航栏效果</div>
      <div style="padding-left: 50px; padding-top: 20px">
        <el-form-item label="主题文字颜色">
          <el-radio-group v-model="colorData.theme_text">
            <el-radio label="black">黑色</el-radio>
            <el-radio label="white">白色</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="主题颜色">
          <el-radio-group v-model="colorData.theme">
            <el-radio label="#ff5903">
              <div class="color-box" style="background-color:#ff5903"></div>
            </el-radio>
            <el-radio label="#fb4b4b">
              <div class="color-box" style="background-color:#fb4b4b"></div>
            </el-radio>
            <el-radio label="#389ee9">
              <div class="color-box" style="background-color:#389ee9"></div>
            </el-radio>
            <el-radio label="#39cc85">
              <div class="color-box" style="background-color:#39cc85"></div>
            </el-radio>
            <el-radio label="#ef889d">
              <div class="color-box" style="background-color:#ef889d"></div>
            </el-radio>
            <el-radio label="#fe1619">
              <div class="color-box" style="background-color:#fe1619"></div>
            </el-radio>
            <el-radio label="#2b79ff">
              <div class="color-box" style="background-color:#2b79ff"></div>
            </el-radio>
            <el-radio label="#00b800">
              <div class="color-box" style="background-color:#00b800"></div>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <div class="applet-blendent-header">底部导航栏效果</div>
      <div style="padding-left: 50px; padding-top: 20px">
        <el-form-item label="底部导航图标">
          <div class="bottom-box" v-for="(item, index) in colorData.navigation" :key="index" @mouseenter="activeIndex = index" @mouseleave="activeIndex = -100">
            <div class="bottom-box-show">
              <img :src="item.filePut" style="height:40px;width:40px;margin-top:5px;">
              <div style="height:20px;line-height:20px;font-size:12px">{{ item.name }}</div>
            </div>
            <div class="bottom-box-active" v-if="activeIndex === index">
              <el-button class="action-button" type="text" style="left:10px" @click="edit(item)">编辑</el-button>
              <el-button class="action-button" type="text" style="right:10px">删除</el-button>
            </div>
          </div>
          <div class="bottom-box" style="position: absolute;" @click="add">
            <i class="el-icon-plus" style="font-size:42px;font-weight:900;color:#909399;line-height:70px"/>
          </div>
        </el-form-item>
        <el-form-item label="底部文字颜色">
          <el-color-picker v-model="colorData.bottom_text"></el-color-picker>
        </el-form-item>
        <el-form-item label="文字选中颜色">
          <el-color-picker v-model="colorData.text_selection"></el-color-picker>
        </el-form-item>
      </div>
    </el-form>

    <!-- 提交 -->
    <div style="text-align:center;margin-top:25px">
      <el-button type="primary" style="padding:8px 20px" @click="submit">保 存</el-button>
    </div>

    <!-- 新增 编辑 -->
    <el-dialog :visible.sync="disAdd" width="35%" :title="isAdd ? '新增' : '修改'">
      <add :isAdd="isAdd" :addData="navData" @success="disAdd = false;" v-if="disAdd"/>
    </el-dialog>
  </div>
</template>

<script>
import { getAppletColor, putAppletColor } from '@/api/applet'
import Add from './components/Add'

export default {
  name: 'blendent',
  components: {
    Add
  },
  data() {
    return {
      colorData: {},
      activeIndex: -100,

      disAdd: false,
      isAdd: true,
      navData: {
        choice_page_name_view: "",
        choice_page_url: "",
        filePut: "",
        filePutSelection: "",
        name: "",
      }
    }
  },
  mounted() {
    this.getAppletColor();
  },
  methods: {
    getAppletColor() {
      const params = {
        key: this.$store.state.app.activeApp.saa_key,
        type: 'mini'
      };
      getAppletColor(params).then(res => {
        if(res.status === 200) {
          this.colorData = res.data;
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 添加
     */
    add() {
      this.navData = {
        choice_page_name_view: "",
        choice_page_url: "",
        filePut: "",
        filePutSelection: "",
        name: "",
      }
      this.disAdd = true;
      this.isAdd = true;
    },
    /**
     * 编辑
     */
    edit(data) {
      this.navData = data;
      this.disAdd = true;
      this.isAdd = false;
    },
    /**
     * 保存
     */
    submit() {
      let navigation = this.colorData.navigation;
      let n = [];
      for (let i = 0; i < navigation.length; i++) {
          let arr_i = JSON.stringify(navigation[i]);
          n.push(arr_i)
      }
      this.colorData.navigation = n;
      putAppletColor(this.colorData).then(res => {
        if(res.status === 200) {
          this.$message.success('修改成功！');
          let navigation = this.colorData.navigation;
          let n = [];
          for (let i = 0; i < navigation.length; i++) {
              let arr_i = JSON.parse(navigation[i]);
              n.push(arr_i)
          }
          this.colorData.navigation = n;
        }else{
          this.$message.error(res.message);
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.applet-blendent-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
}
.applet-blendent-header{
  height: 40px;
  width: 100%;
  line-height: 40px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #8f8f8f;
  padding: 0 10px;
  background-color: #F4F8FB;
}
.color-box{
  height: 25px;
  width: 25px;
  display: inline-block;
  vertical-align: middle;
}
.bottom-box{
  height: 80px;
  width: 80px;
  border: 1px solid #ccc;
  display: inline-block;
  margin: 0 10px;
  text-align: center;
  cursor: pointer;
  &-show{
    height: 100%;
    width: 100%;
  }
  &-active{
    height: 100%;
    width: 100%;
    position: relative;
    top: -78px;
    background-color: rgba(0, 0, 0, 0.699);
  }
}
.action-button{
  position: absolute;
  top: 20px;
}
</style>
